<template>
		<view class="fh-picture-list fh-width-100 uni-flex fh-flex-wrap">
			<view v-for="(item,index) in images"  class="fh-picture-item uni-center" :style="itemStyle">
				<image class=" fh-width-100 fh-height-100" :src="item.thumbUrl ?item.thumbUrl: item.picUrl" @tap="$utils.pic.pvi(item.picUrl ?item.thumbUrl: item.picUrl)"  mode="aspectFill"></image>
				<text class='fh-pickture-delete' @click='onDelete(item)' :data-index="index">x</text>
			</view>
			<view v-for="(item,index) in picList" :key="index" class="fh-picture-item uni-center" :style="itemStyle">
				<image class=" fh-width-100 fh-height-100" :src="item.url ? item.url:item.picUrl" @tap="$utils.pic.pvi(item.picUrl ?item.thumbUrl: item.picUrl)" mode="aspectFill"></image>
				<view v-show="item.uploading" class="fh-pickture-uploading uni-center fh-width-100">上传中</view>
				<text class='fh-pickture-delete' @click='deleteImage(index)' :data-index="index">x</text>
			</view>

			<view class='fh-picture-item uni-center' :style="itemStyle" v-show="currentCount < count" v-for="n in (showAllAdd ? count-currentCount : 1)">
				<view class="fh-add-image uni-flex fh-justify-content-center fh-align-items-center fh-height-100" @click='chooseImage'>
				<view class="fh-pictrue-add-text">+</view>
				</view>
			</view>
		</view>
</template>

<script>
export default {
  data() {
    return {
      // 值={url,tempUrl,uploading}
      picList: []
    };
  },
  computed:{
    currentCount(){
      return this.images.length + this.picList.length
    }
  },
  props: {
    //默认回显图片地址
    images:{
      type: Array,
      default:[]
    },
    onDelete:{
      default:function(item){}
    },
    onUploadSuccess:{
      default:function(res){}
    },
    //最大上传数量
    count: {
      type: Number,
      default:1
    },
    // 每一项的样式表，一般用来设置宽度和高度
    itemStyle:{
      default:''
    },
    //是否显示所有未上传的+号
    showAllAdd:{
      default:false
    },
    //图片路径
    path:{
      default:''
    }
  },
  methods: {
    // 选择图片
    chooseImage() {
      let self = this
      let count = this.count
      if(this.currentCount == count){
        return
      }else{
        count = this.count - this.currentCount
      }
      uni.chooseImage({
        count:count,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          if(res.tempFiles.length > count){
            uni.showToast({
              icon:'none',
              title:'最多选择' + count + '张'
            })
            return
          }

          for (let i in res.tempFiles) {
            let index = self.picList.length
            self.picList.push({
              index:index,
              tempUrl:res.tempFiles[i].path,
              uploading:true
            })
            self.$http.upload('/file/cloudstorage/upload', {
              params: {path: self.path}, /* 会加在url上 */
              // #ifdef APP-PLUS || H5
              files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
              // #endif
              // #ifdef MP-ALIPAY
              fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
              // #endif
              filePath: res.tempFiles[i].path, // 要上传文件资源的路径。
              // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
              custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
              name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
              // #ifdef H5 || APP-PLUS
              timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
              // #endif
              header: {},  /* 会与全局header合并，如有同名属性，局部覆盖全局 */
              formData: {}, // HTTP 请求中其他额外的 form data
              // 返回当前请求的task, options。请勿在此处修改options。非必填
              getTask: (task, options) => {
                // task.Update((res) => {
                //   console.log('上传进度' + res.progress);
                //   console.log('已经上传的数据长度' + res.totalBytesSent);
                //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
                //
                //   // 测试条件，取消上传任务。
                //   if (res.progress > 50) {
                //     uploadTask.abort();
                //   }
                // });
              }
            }).then(res => {
              // 返回的res.data 已经进行JSON.parse
              self.onUploadSuccess(res)
              for(let m=0;m<self.picList.length;m++){
                if(self.picList[m].index == index){
                  self.deleteImage(m)
                }
              }
            }).catch(err => {

            })
          }
        }
      })
    },
    deleteImage(index) {
      this.picList.splice(index, 1);
    }
  }
}
</script>

<style>

.fh-picture-item{
	margin: 10upx;
	display: inline-block;
	position: relative;
	width:150upx;
	height:150upx;
	background-color: #eee;
	cursor: pointer;
	color: #ddd;
}
.fh-pickture-delete{
	position: absolute;
	top: -11rpx;
	right: -11rpx;
	color: rgba(255, 255, 255, 0.49);
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	line-height: 35rpx;
	text-align: center;
	background-color: #ff8616;
	border: 2px solid white;
}
.fh-pictrue-add-text{
	font-size: 80upx;
}
.fh-pickture-uploading{
	line-height: 150upx;
	position: absolute;
	left:0;
	top:0;
	bottom: 0;
	top: 0;
}
</style>
